<template>
    <div>
        <div class="mui-card" v-for="(item,index) in videoList" :key="item.id" @click.stop="showVideo(index)">
            <div class="video-box" :class="activeClass == index ? 'active' : '' ">
            <!--<div class="video-box" :class="{active : activeClass == index}">-->
                <video class="video-js" controls preload="auto" width="100%" height="180" poster="" data-setup="{}">
                    <source :src="item.url" type="video/mp4">
                    <!--  http://hqweb.oss-cn-shenzhen.aliyuncs.com/video/CPApx.MP4 -->
                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a web browser that
                        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>
                <div class="close" @click.stop="closeVideo()">X</div>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <img src="../../images/video.jpg">
                    <div class="mui-media-body">
                        <h4>{{item.title}}</h4>
                        <p class='mui-ellipsis'>
                            <span>{{item.info}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    export default{
        data(){
            return {
                videoList:[],
                activeClass:-1,
            }
        },
        created(){
            this.getVideo();
        },
        methods: {
            getVideo(){
                this.$http.get("src/mock/video.json").then(result=>{
                    if(result.status == 200){
                        this.videoList = result.body;
                    }
                })
            },
            showVideo(index){
                this.activeClass = index;
            },
            closeVideo(){
                this.activeClass = -1;
           }

        },
        computed: {},
        components: {}
    }
</script>
<style lang="scss" scoped>
    .video-box.active{
        display: block;
    }
    .video-box.hide{
        /*display: none;*/
    }
    .video-box{
        display: none;
        position: relative;
        .close{
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            color: red;
            border: 1px solid red;
            position: absolute;
            top: 10px;
            right: 20px;
            text-align: center;
            border-radius: 50%;
        }
    }
  .mui-card-content-inner{
      display: flex;
      align-items: center;
      img{
          width: 100px;
          margin-right: 10px;
      }
      .mui-media-body{
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          .mui-ellipsis{
            display: flex;
            flex-flow: column;
          }
      }


  }


</style>